<template>
    <div>
        <el-card class="card">
            <div class="title">
                <h2 style="text-align: center">个人工作任务统计</h2>
            </div>
        </el-card>
        <br />
        <el-card>
            <el-button type="info" v-print="`#print`" style="margin-bottom: 10px;" >打 印</el-button>
            <el-row>
                <el-col :span="4">
                    <span>年度：</span>
                    <el-select v-model="yearValue" filterable @change="searchPersonTask()">
                        <el-option v-for="item in yearOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <span>部门：</span>
                    <el-select v-model="departmentValue" filterable @change="searchPersonTask()">
                        <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <span>教师姓名：</span>
                    <el-select v-model="teacherValue" filterable @change="searchPersonTask()">
                        <el-option v-for="item in teacherOptions" :key="item.value" :label="item.label" :value="item.label"> </el-option>
                    </el-select>
                </el-col>
                <el-col :span="4">
                    <span>专项考核：</span>
                    <el-select v-model="testValue" filterable @change="searchPersonTask()">
                        <el-option v-for="item in testOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <br />
            <el-table :data="personalData" style="width: 100%" border id="print">
                <el-table-column prop="id" label="序号"> </el-table-column>
                <el-table-column prop="name" label="任务标题"> </el-table-column>
                <el-table-column prop="managerId" label="负责人"> </el-table-column>
                <el-table-column prop="helperIds" label="协助人"> </el-table-column>
                <el-table-column prop="startTime" label="开始日期"> </el-table-column>
                <el-table-column prop="endTime" label="完成日期"> </el-table-column>
                <el-table-column prop="isAssess" label="属于学校的专项工作">
                    <template slot-scope="scope">
                        <div v-if="scope.row.isAssess == 0">否</div>
                        <div v-if="scope.row.isAssess == 1">是</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" prop="requirement" width="200">
                    <template slot-scope="scope">
                        <el-popover placement="top-start" title="工作要求" width="200" trigger="hover" :content="scope.row.requirement">
                            <el-button slot="reference">查看</el-button>
                        </el-popover>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import moment from 'moment';
import yearTargetApi from '../../../../api/yearTagetApi';
import departmentApi from '../../../../api/department';
import personApi from '../../../../api/person';
export default {
    data() {
        return {
            personalData: [],
            yearOptions: [],
            departmentOptions: [],
            teacherOptions: [],
            testOptions: [
                {
                    value: '',
                    label: '全部'
                },
                {
                    value: '-1',
                    label: '--'
                },
                {
                    value: '1',
                    label: '是'
                },
                {
                    value: '0',
                    label: '否'
                }
            ],
            yearValue: '',
            yearLabel: '',
            departmentValue: '',
            teacherValue: '',
            testValue: '',
            asyncFlag: 0
        };
    },
    methods: {
        // 获取所有老师
        async getTeachers() {
            await personApi.getAllTeacher().then((res) => {
                for (let i = 0; i < res.data.length; ++i) {
                    this.teacherOptions[i] = {
                        value: res.data[i].id,
                        label: res.data[i].name
                    };
                }

                this.teacherOptions.unshift({
                    value: '',
                    label: '全部'
                });
                this.teacherValue = this.teacherOptions[0].label;
                this.$forceUpdate();
            });
        },
        // 获取所有年度目标任务
        async getTargetYear() {
            await yearTargetApi.findAll().then((res) => {
                for (let i = 0; i < res.data.length; ++i) {
                    this.yearOptions[i] = {
                        value: res.data[i].id,
                        label: res.data[i].name
                    };
                }
                this.yearValue = this.yearOptions[0].value;
                this.yearLabel = this.yearOptions[0].label;
                // 强制刷新 解决有数据不渲染的问题
                this.$forceUpdate();
                this.asyncFlag = 1;
            });
        },
        async getDepartment() {
            await departmentApi.getAllDepart().then((res) => {
                for (let i = 0; i < res.data.length; ++i) {
                    this.departmentOptions[i] = {
                        value: res.data[i].id,
                        label: res.data[i].name
                    };
                }
                this.departmentOptions.unshift({
                    value: '',
                    label: '全部'
                });
                // 强制刷新 解决有数据不渲染的问题
                this.$forceUpdate();
            });
        },
        async searchPersonTask() {
            if(this.teacherValue == '全部'){
                this.teacherValue = ''
            }
            await personApi.searchPersonTask(this.yearValue, this.departmentValue, this.teacherValue, this.testValue).then((res) => {
                this.personalData = res.data;
                for (var i = 0; i < this.personalData.length; ++i) {
                    let a = this.personalData[i].startTime;
                    let b = this.personalData[i].endTime;
                    this.personalData[i].startTime = moment(a).format('YYYY-MM-DD');
                    this.personalData[i].endTime = moment(b).format('YYYY-MM-DD');
                }
                console.log(res);
            });
            if(this.teacherValue == ''){
                this.teacherValue = '全部'
            }
        },
        getLabel(id) {
            let obj = {};
            obj = this.teacherOptions.find((item) => {
                return item.value === id;
            });
            return obj.label;
        }
    },
    created() {
        this.getTargetYear();
        this.getDepartment();
        this.getTeachers();
    },
    watch: {
        asyncFlag() {
            this.searchPersonTask();
        }
    }
};
</script>

<style scoped>
.title {
    border: 1px #bcbcbc;
    width: 50%;
    margin: 0 auto;
}
.card {
    border-radius: 15px;
    width: 50%;
    margin: 0 auto;
}
</style>